<!DOCTYPE html>
<html lang="en">
	
<head>
    <meta charset="UTF-8"> <!-- Set character encoding to UTF-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Define IE compatibility mode -->
    <meta name="viewport" content="width=device-width, initial-scale=C"> <!-- Set the viewport for responsive design -->
    <title>Shake Button</title> <!-- Set the page title -->
    <style type="text/css">
        * {
            box-sizing: border-box; /* Apply the box model to all elements */
            margin: 0; /* Remove default margins */
            padding: 0; /* Remove default paddings */
        }

        html,
        body {
            height: 100vh; /* Set the height of HTML and body to 100% of the viewport height */
        }

        body {
            background-color: #4A676A; /* Set the background color of the body */
            font-family: Roboto, Arial, sans-serif; /* Specify font family for text */
            display: flex; /* Use flexbox for layout */
            align-items: center; /* Vertically center content */
            justify-content: center; /* Horizontally center content */
        }

        .btn {
            height: 70px; /* Set button height */
            width: 250px; /* Set button width */
            font-size: 20px; /* Set font size */
            font-weight: bold; /* Set font weight to bold */
            text-transform: uppercase; /* Transform text to uppercase */
            letter-spacing: 2px; /* Add letter spacing to text */
            background-color: transparent; /* Set background color to transparent */
            outline: none; /* Remove button outline */
            border: 3px solid #FFEAA5; /* Set border with color */
            color: #FFEAA5; /* Set text color */
            position: relative; /* Set position to relative for child elements */
            cursor: pointer; /* Change cursor to pointer on hover */
            overflow: hidden; /* Hide overflowing content */
            transition: all .3s; /* Apply a smooth transition to all properties over 0.3 seconds */
        }

        .btn:hover {
            color: #7cd2f1; /* Change text color on hover */
            border: 3px solid #7cd2f1; /* Change border color on hover */
            animation: shake .3s linear; /* Apply the 'shake' animation on hover */
        }

        @keyframes shake {
            0%, 
            100% {
                transform: rotate(0); /* Start and end with no rotation */
            }
            
            25%, 
            75% {
                transform: rotate(-10deg); /* Rotate left at 25% and 75% of the animation */
            }
            
            50% {
                transform: rotate(10deg); /* Rotate right at 50% of the animation */
            }
        }
    </style>
</head>
<body>
    <div>
        <button class="btn">Shake Me</button> <!-- Create a button with the "btn" class -->
    </div>
</body>
</html>

